<template>
	<view>
		<customHeadVue title="工艺库列表" :isShowRightMenu="false"></customHeadVue>
		<view class="content-bg">
			<view class="top-search-bg">
				<uni-icons type="search" size="20" color="#FFFFFF"></uni-icons>
				<view class="search-input-bg">
					<input placeholder="输入" v-model="searchKeyword" />
				</view>
			</view>

			<view class="list-data-bg">
				<view class="table-item-common-bg table-title-bg">
					<view class="table-th2-bg">工艺名称</view>
					<view class="table-th3-bg">操作</view>
				</view>
				<view class="table-item-common-bg table-data-bg" v-for="(item, index) in filteredList" :key="index"
					:class="index==(filteredList.length-1)?'last-table-item-bg':''" @click.stop="selectProcess(item, index)">
					<view class="table-td2-bg">{{item.name}}</view>
					<view class="table-td3-bg">
						<view class="img-out-bg mar-right modify-out-bg">
							<image class="modify-img" src="../../static/robot/icon_modify.png" @click.stop="modifyTemplate(item, index)"></image>
						</view>
						<view class="img-out-bg del-out-bg">
							<image class="del-img" src="../../static/robot/icon_del.png" @click.stop="deleteTemplate(item,index)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import robotApi from '../../apis/robotApi';
	import customHeadVue from '../../components/custom-head.vue';
	import * as Constants from '@/common/constants.js';
	export default {
		components: {
			customHeadVue
		},
		data() {
			return {
				searchKeyword: "",
				temDataList: [],
				toProcessListFromPage: -1,
			}
		},
		computed: {
			filteredList() {
				if (!this.temDataList || this.temDataList.length < 0) {
					return []
				}
				let list = this.temDataList;

				// 处理搜索框筛选
				if (this.searchKeyword) {
					const keyword = this.searchKeyword.toLowerCase();
					list = list.filter(item =>
						item.name && item.name.toLowerCase().includes(keyword)
					);
				}

				return list;
			}
		},
		onLoad(options) {
			this.toProcessListFromPage = options.toProcessListFromPage
			this.getTemplateData()
		},
		methods: {
			/**
			 * 获取工艺列表
			 */
			getTemplateData() {
				this.temDataList = []
				robotApi.getCraftList({})
					.then(res => {
						if (res && res.length > 0) {
							this.temDataList = res
						}
					})
			},
			
			selectProcess(item, index) {
				let _this = this
				uni.showModal({
					title: "是否选择该工艺？",
					success(res) {
						if (res.confirm) {
							if (_this.toProcessListFromPage == Constants.IN_PROCESS_LIST_VIEW_FROM_HAND_TEMPLATE_VIEW) {
								// 来自手动模板的全局工艺点击事件的选择返回
								uni.$emit("noticeHandTemplateChooseProcessBack", item, index)
								setTimeout(function(){
									uni.navigateBack()
								},100)
							} else if (_this.toProcessListFromPage == Constants.IN_PROCESS_LIST_VIEW_FROM_TEACH_TEMPLATE_VIEW) {
								// 来自示教焊接的全局工艺点击事件的选择返回
								uni.$emit("noticeTeachWeldingChooseProcessBack", item, index)
								setTimeout(function(){
									uni.navigateBack()
								},100)
							}
						}
					}
				})
			},
			
			/**
			 * 从工艺列表页面通知首页切换到工艺编辑布局，进行修改
			 * @param {Object} item
			 * @param {Object} index
			 */
			modifyTemplate(item,index) {
				if (this.toProcessListFromPage == Constants.IN_PROCESS_LIST_VIEW_FROM_HAND_TEMPLATE_VIEW) {
					// 来自手动模板的全局工艺点击事件的选择返回
					uni.$emit("noticeIndexShowProcessEditViewFromProcessListView", item, index)
					setTimeout(function(){
						uni.navigateBack()
					},100)
				} else if (this.toProcessListFromPage == Constants.IN_PROCESS_LIST_VIEW_FROM_TEACH_TEMPLATE_VIEW) {
					// 来自示例焊接的全局工艺点击事件的选择返回
					uni.$emit("noticeIndexShowProcessEditViewFromProcessListViewRootTeachWelding", item, index)
					setTimeout(function(){
						uni.navigateBack()
					},100)
				}
			},
			
			deleteTemplate(item,index) {
				let _this = this
				uni.showModal({
					title: "是否删除该工艺？",
					success(res) {
						if (res.confirm) {
							_this.delCraft(item.number)
						}
					}
				})
			},
			delCraft(id) {
				robotApi.delCraft(id)
					.then(res => {
						if (res) {
							this.getTemplateData()
						}
					})
			},
			
			notifyProcessEditView() {
				uni.$emit("noticeProcessEditViewModifyFinishFromProcessListView", item, index)
			}
		}
	}
</script>

<style>
	page {
		background-color: #1e40af;
	}
</style>
<style lang="scss" scoped>
	.content-bg {
		padding: 80rpx 40rpx;
	}

	.top-search-bg {
		background-color: #1e3a8a;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.search-input-bg {
		margin-left: 30rpx;

		input {
			color: #FFFFFF;
		}
	}

	.list-data-bg {
		border: 2rpx solid rgba(59, 95, 159, 1);
		border-radius: 16rpx;
	}

	.table-item-common-bg {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.table-title-bg {
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
		background-color: #1e3a8a;
	}

	.table-th1-bg {
		flex: 2;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.table-th2-bg {
		flex: 5;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.table-th3-bg {
		flex: 3;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: right;
	}

	.table-data-bg {
		background-color: #1e40af;
		border-bottom: 2rpx solid #1e3a8a;
	}

	.last-table-item-bg {
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
	}

	.table-td1-bg {
		flex: 2;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.table-td2-bg {
		flex: 5;
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.table-td3-bg {
		flex: 3;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.img-out-bg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.mar-right {
			margin-right: 20rpx;
		}

		.modify-out-bg {
			background-color: #3b82f6;
		}

		.del-out-bg {
			background-color: #dc2626;
		}

		.del-img {
			width: 48rpx;
			height: 48rpx;
		}

		.modify-img {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>